/**
 * Created by Administrator on 2021/9/13.
 */

/*
    DOM (Document Object Model)

*  document: HTML文档
*
*  document.querySelector("选择器的名称");
*
*/
//var element1 = document.querySelector("button");
//console.log(element1);
//
//var element2 = document.querySelector(".username");
//console.log(element2);
//
//var element3 = document.querySelector("input[type=password]");
//console.log(element3);

//获得id="p4"的元素
var element1 = document.querySelector("#p4");
console.log("获得id=p4的元素");
console.log(element1);
//获得.p1 下的.str1 元素
var element2 = document.querySelector(".p1 .str1");
console.log("获得.p1 下的.str1 元素");
console.log(element2);
//获得class="d1"下的 ul 元素
var element3 = document.querySelector(".d1 ul");
console.log("获得class=d1下的 ul 元素");
console.log(element3);
//获得class="d1"下的 ul的所有子元素
var element4 = element3.children;
console.log("获得class=d1下的 ul的所有子元素");
console.log(element4);
//获得class="d1"下的 ul的第1个li 元素
var element5 = element3.firstElementChild;
console.log("获得class=d1下的 ul的第1个li 元素");
console.log(element5);
//获得class="d1"下的 ul的第2个li 元素
var element6 = element3.children[1];
console.log("获得class=d1下的 ul 元素");
console.log(element6);
//获得class="d1"下的 ul的第4个li 元素
var element7 = element3.children[3];
console.log("//获得class=d1下的 ul的第4个li 元素 ");
console.log(element7);
//获得class="d1"下的 ul的最后个li 元素
var element8 = element3.lastElementChild;
console.log("获得class=d1下的 ul的最后个li 元素");
console.log(element8);
//获得class="d1"下的 ul的第4个li 元素 获得class=d1下的 ul 元素的前一个兄弟元素
var element9 = element7.previousElementSibling;
console.log("获得class=d1下的 ul的第4个li 元素 获得class=d1下的 ul 元素的前一个兄弟元素");
console.log(element9);
//获得class="d1"下的 ul的第4个li 元素 的下一个兄弟元素
var element10 = element7.nextElementSibling;
console.log("获得class=d1下的 ul的第4个li 元素 的下一个兄弟元素");
console.log(element10);
//获得class="d1"下的 ul的第4个li 元素 的父元素
var element11 = element7.parentElement;
console.log("获得class=d1下的 ul的第4个li 元素 的父元素");
console.log(element11);